<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../s/vue/2.7.16/vue.min.js"></script>
</head>
<body>

	<h3>条件渲染</h3>
	<p>Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。</p>
	<p>测试：输入一些文本，然后点击 「Toggle login type」 进行切换</p>
	<div id="no-key-example" class="demo">
		<div>
			<template v-if="loginType === 'username'">
				<label>Username</label>
				<input placeholder="Enter your username">
			</template>
			<template v-else="">
				<label>Email</label>
				<input placeholder="Enter your email address">
			</template>
		</div>
		<button @click="toggleLoginType">Toggle login type</button>
	</div>
<script>
new Vue({
  el: '#no-key-example',
  data: {
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
})
</script>

	<p>现在输入文本将会在每次切换时重新渲染。自动动手试一试。</p>
	<div id="key-example" class="demo">
		<div>
			<template v-if="loginType === 'username'">
				<label>Username</label>
				<input placeholder="Enter your username" key="username-input">
			</template>
			<template v-else="">
				<label>Email</label>
				<input placeholder="Enter your email address" key="email-input">
			</template>
		</div>
		<button @click="toggleLoginType">Toggle login type</button>
	</div>
<script>
new Vue({
  el: '#key-example',
  data: {
    loginType: 'username'
  },
  methods: {
    toggleLoginType: function () {
      return this.loginType = this.loginType === 'username' ? 'email' : 'username'
    }
  }
})
</script>

</body>
</html>